<template>
  <div v-if="browserRedirect">
    <div>
      <div class="extra-wrapper" slot="tabBarExtraContent" style="padding:0;margin-bottom: -10px;margin-top:5px">
        <a-select defaultValue="" @change="changeSpecification" style="width:90%;margin-left: 5%;">
          <a-select-option key="" value="">请选择</a-select-option> 
          <a-select-option v-for="(val,index) in colList" :key="val.itemPatch" :value="val.id">{{val.productName+"/批次-"+val.itemPatch}}</a-select-option>
        </a-select>
      </div>
      <a-tabs @change="callback" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
        <a-tab-pane loading="true" tab="在售剧本" key="1" style="min-height: 100vh;">
          <ul style="margin: 0;padding:0;list-style-type: none;">
            <li v-for="val in dataSource" class="liCommSty">
              <div style="display: flex;border-bottom: 1px solid #EBEBEB;padding-bottom: 20px;">
                <img v-if="val.personPoster.indexOf(',') == -1" :src="urlImg+val.personPoster" style="width:90px;height:90px;" alt="产品海报图">
                <img v-else :src="urlImg+val.personPoster.split(',')[0]" style="width:90px;height:90px;" alt="产品海报图">
                <div style="padding-left:15px;">
                  <div style="font-size: 14px;font-weight: bold;">
                    <span>{{val.productName}}</span>
                    <span style="position: absolute;right: 15px;" @click="detailsCli(val,2)">详情</span>
                  </div>
                  <div style="font-size: 14px;font-weight: bold;color:#888;max-height: 50px;overflow: hidden;text-overflow: ellipsis;">一句话简介：{{val.productInfo}}</div>
                  <div style="font-size: 14px;font-weight: bold;color:#666;">
                    <span>总量：{{val.total}}</span>
                    <span style="position: absolute;right: 15px;color:#FF5252;font-size: 16px;">¥{{val.wholesalePrice}}</span>
                  </div>
                </div>
              </div>
              <div style="margin-top: 20px;">
                <span>作者</span>
                <span style="float: right;">{{val.author}}</span>
              </div>
              <div style="margin-top: 10px;">
                <span>正式发售时间</span>
                <span style="float: right;">{{val.publicTime}}</span>
              </div>
              <div style="margin-top: 10px;">
                <span>批次</span>
                <span style="float: right;">{{val.itemPatch}}</span>
              </div>
            </li>
          </ul>
          <a-pagination showQuickJumper :defaultCurrent="ipagination.current" :total="ipagination.total" @change="onChange"/>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
  <div v-else style="border-radius: 10px;" @click="showExImg=false">
    <!-- <div v-if="showOneTep" style="background-color: #fff;border-radius: 10px;">
      <img src="../../assets/product-img-lead.svg" style="width:400px;margin-top:90px;position: relative;left: 50%;margin-left: -200px;" alt="">
      <div style="text-align: center;padding:30px 0px;font-weight: bold;color:#000;">
        “剧本杀”最初源自线下游戏“谋杀之谜”，是一款 LARP （实时角色扮演）游戏。“剧本杀”一词开始迅速走红，有望成为继狼人杀之后的下一个风口级游戏。
      </div>
      <div style="padding-bottom: 80px;">
        <a-button type="primary" style="width: 140px;height: 40px;display: inherit;margin:0 auto;border-radius: 23px;" @click="checkCli">立即体验</a-button>
      </div>
    </div> -->
    <a-card v-if="showOneTep" :bordered="false" :body-style="{padding: '0'}">
      <div class="salesCard">
        <a-tabs @change="callback" default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
            <div class="extra-wrapper" slot="tabBarExtraContent">
              <a-select defaultValue="" @change="changeSpecification" class="selSty">
                <a-select-option key="" value="">请选择</a-select-option> 
                <a-select-option v-for="(val,index) in colList" :key="val.itemPatch" :value="val.id">{{val.productName+"/批次-"+val.itemPatch}}</a-select-option>
              </a-select>
              <Button type="primary" style='margin-right:30px;' @click="jumpShow">添加在售剧本</Button>
            </div>
          <a-tab-pane tab="在售剧本" key="1">
            <a-row style="padding:0 15px 28px 15px;" class="rowTab">
                  <a-table
                :columns="columns"
                :dataSource="dataSource"
                :pagination="ipagination"
                @change="handleTableChange">
                <template slot="htmlSlot" slot-scope="text, record">
                  <div style="height:90px;display: flex;">
                    <div style="display: inline-block;">
                      <img v-if="record.personPoster.indexOf(',') == -1" :src="urlImg+record.personPoster" style="width:90px;height:90px;" alt="产品海报图">
                      <img v-else :src="urlImg+record.personPoster.split(',')[0]" style="width:90px;height:90px;" alt="产品海报图">
                    </div>
                    <div style="display: inline-block;line-height: 26px;margin-left:10px;">
                      <div style="font-size: 14px;font-weight: bold;">{{record.productName}}</div>
                      <div style="font-size: 14px;font-weight: bold;color:#888;max-height: 50px;overflow: hidden;text-overflow: ellipsis;">一句话简介：{{record.productInfo}}</div>
                      <div style="font-size: 14px;font-weight: bold;color:#666;">批次：{{record.itemPatch}}</div>
                    </div>
                  </div>
                </template>
                <template slot="total" slot-scope="text, record">
                  <div style="font-size: 14px;font-weight: bold;">{{record.total+"/"+(record.total-record.bindNumber)}}</div>
                </template>
                <template slot="imgSlot" slot-scope="text">
                  <span v-if="!text" style="font-size: 12px;font-style: italic;">无此图片</span>
                  <img v-else :src="getImgView(text)" height="25px" alt="图片不存在" style="max-width:80px;font-size: 12px;font-style: italic;"/>
                </template>
                <template slot="fileSlot" slot-scope="text">
                  <span v-if="!text" style="font-size: 12px;font-style: italic;">无此文件</span>
                  <a-button
                    v-else
                    :ghost="true"
                    type="primary"
                    icon="download"
                    size="small"
                    @click="uploadFile(text)">
                    下载
                  </a-button>
                </template>
    
                <span slot="action" slot-scope="text, record">
                  <a v-if="record.applyStatus == null" href="javascript:;" @click="codeQrCli(record)">申请正版码</a>
                  <a-divider v-if="record.applyStatus == null" type="vertical" />
                  <a v-if="record.applyStatus == null || record.applyStatus == 2" href="javascript:;" @click="detailsCli(record,1)">编辑</a>
                  <a-divider v-if="record.applyStatus == null || record.applyStatus == 2" type="vertical" />
                  <a v-if="record.applyStatus == 0 || record.applyStatus == 1 || record.applyStatus == 3" href="javascript:;" @click="addItemPath(record)">增加批次</a>
                  <a-divider v-if="record.applyStatus == 0 || record.applyStatus == 1 || record.applyStatus == 3" type="vertical" />
                  <a v-if="record.applyStatus == 0 || record.applyStatus == 1 || record.applyStatus == 3" href="javascript:;" @click="detailsCli(record,2)">详情</a>
                  <a-divider v-if="record.applyStatus == 0 || record.applyStatus == 1 || record.applyStatus == 3" type="vertical" />
                  <a-popconfirm title="确定删除吗?" @confirm="() => deleteCli(record)">
                    <a>删除</a>
                  </a-popconfirm>
                </span>
              </a-table>
            </a-row>
          </a-tab-pane>
        </a-tabs>
      </div>
      <!-- <a-modal title="转在售剧本" v-model="visible" @ok="handleOk" style="text-align: center;">
        <p>您确定要将该剧本转为在售剧本吗，此操作不可撤销，请谨慎操作！</p>
      </a-modal> -->
      <a-modal title="增加批次" :confirmLoading="showTrue" v-model="visibleAgean" @ok="handleAgainOk" style="text-align: center;">
        <div>
          <span>批次：</span>
          <a-input style="width:50%;" placeholder="请输入批次" v-model="itemPathVal"></a-input>
        </div>
        <div style="margin-top:20px;">
          <span>总量：</span>
          <a-input-number :min="1" :max="100" style="width:50%;" placeholder="请输入总量" v-model="totalVal"></a-input-number>
        </div>
      </a-modal>
      <BlockProductApplyCopyModal v-if="showCode" :listCodeData="listCodeData" @returnUp="returnUp"></BlockProductApplyCopyModal>
      <BlockProductStandardsAll v-if="showAll" :listData="listData" @returnUp="returnUp"></BlockProductStandardsAll>
      <blockProductStandards-modal ref="modalForm" @ok="modalFormOk"></blockProductStandards-modal>
    </a-card>
    <a-card v-if="showNext" :bordered="false">
      <a-button style="position: absolute;" type="primary" @click="returnListCli">返回列表</a-button>
      <a-steps :current="current" style="margin-bottom: 50px;width:60%;margin: 0 auto;">
        <a-step>
          <template slot="title">
            基础信息
          </template>
          <!-- <span slot="description"></span> -->
        </a-step>
        <a-step>
          <template slot="title">
            剧本详细信息
          </template>
          <!-- <span slot="description"></span> -->
        </a-step>
        <a-step>
          <template slot="title">
            资料上传
          </template>
          <!-- <span slot="description"></span> -->
        </a-step>
      </a-steps>
      <a-form :form="form" style="padding:0 20%;" id="components-form">
        <div v-show="tab1Show">
          <div v-show="showExImg" style="width:100%;height:100vh;z-index:999;position: fixed;background: rgba(0,0,0,.5);top:0;left:0;">
            <img style="position: absolute;top:50px;width:360px;left:50%;margin-left:-180px;" src="../../assets/exImg.png">
          </div>
          <a-row style="margin-top:20px;margin-bottom: 10px;">
            <!-- <div style="margin-bottom: 20px;color:#FF5252;cursor: pointer;" @click.stop="showExImg=true">小程序端示例</div> -->
            <a-button type="primary" @click.stop="showExImg=true">小程序端示例</a-button>
          </a-row>
          <!-- <a-row style="margin-top:50px;">
            <a-form-item label="剧本状态" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-radio-group v-decorator="[ 'productStatus', validatorRules.productStatus]">
                <a-radio value="1">在售</a-radio>
                <a-radio value="2">预售</a-radio>
              </a-radio-group>
            </a-form-item>
        </a-row>
        <a-row style="padding-left:150px;margin-top: -24px;margin-bottom: 25px;">
          <div style="padding:8px 20px;border:1px solid #FFA39E;background-color: #FFF1F0;color:#666;width:70%;">预售剧本只可用于展会</div>
        </a-row> -->
          <a-row>
              <a-form-item label="剧本名称" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
                <a-input v-decorator="[ 'productName', validatorRules.productName]" placeholder="最多15个字符"></a-input>
                <div class="help-tip">
                  <p>请输入您的剧本名称</p>
                </div>
              </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="作者" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-input v-decorator="[ 'author', validatorRules.author]" placeholder="最多15个字符"></a-input>
              <div class="help-tip">
                <p>请输入剧本的作者</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="批次" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-input v-decorator="[ 'itemPatch', validatorRules.itemPatch]" placeholder="最多10个字符"></a-input>
              <div class="help-tip">
                <p>为您的剧本正版二维码设置批次号，以方便区分为同一个剧本申请了几次二维码，第一次申请建议填写1</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="总量" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-input-number :min="1" :max="1000" v-decorator="[ 'total', validatorRules.total]" placeholder="最大总量 100" style="width: 100%"/>
              <div class="help-tip">
                <p>同一批次下申请二维码的数量，最大数量1000，若要需求更多二维码，需要另外增加批次，批次下的数量确定后不能更改</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="零售价格" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-input-number :min="1" :precision="2" style="width:100%;" v-decorator="[ 'wholesalePrice', validatorRules.wholesalePrice]" placeholder="仅支持数字，小数点后2位"></a-input-number>
              <div class="help-tip">
                <p>请输入您剧本的零售价格。</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="正式发行时间" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-date placeholder="请选择正式发行时间" v-decorator="[ 'publicTime', validatorRules.publicTime]" :trigger-change="true" style="width: 100%"/>
              <div class="help-tip">
                <p>请选择您剧本正式发售的时间，该时间会作为校验正版的依据之一，请准确填写。</p>
              </div>
            </a-form-item>
          </a-row>
          <div style="width:100%;">            
            <Button type="primary" style='margin-left:20%;display: block;width: 20%;' @click="nextStep(0)">下一步</Button>
          </div>
        </div>
        <div v-show="tab2Show">
          <a-row style="margin-top:50px;">
            <a-form-item label="剧本人数" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-select defaultValue="" style="width:100px;" v-model="manSel">
                <a-select-option v-for="(vals,index) in listPerson" :key="vals.val" :value="index">{{vals.name}}</a-select-option>
              </a-select>
              <div style="display: inline-block;" v-if="manSel == 0">
                <a-input-number :min="1" placeholder="剧本人数" v-model="detailNum1" style="width: 50%;margin-left:10%;"/> 人
              </div>
              <div style="display: inline-block;width:76%;" v-if="manSel == 1">
                <div style="display: inline-block;margin-left:10%;width: 35%;">
                  男 <a-input-number :min="1" v-model="detailNum2" style="width: 60%;"/> 人
                </div>
                <div style="display: inline-block;margin-left:10%;width: 35%;">
                  女 <a-input-number :min="1" v-model="detailNum3" style="width: 60%;"/> 人
                </div>
              </div>
              <div class="help-tip">
                <p>请根据剧本创意设置剧本最佳的游玩人数。</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="剧本介绍" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-textarea v-decorator="[ 'detailInfo', validatorRules.detailInfo]" placeholder="最多300个字符" style="width: 100%"/>
              <div class="help-tip">
                <p>您的剧本介绍将显示在小程序剧本详情页中，请酌情填写。</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="一句话简介" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-textarea v-decorator="[ 'productInfo', validatorRules.productInfo]" placeholder="最多15个字符" style="width: 100%"/>
              <div class="help-tip">
                <p>您的剧本一句话简介将在出现在小程序剧本名称下方，请酌情填写。</p>
              </div>              
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="剧本实景" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-dict-select-tag type="radio" v-decorator="['playReality', validatorRules.playReality]" :trigger-change="true" dictCode="play_reality"/>
              <div class="help-tip">
                <p>请选择您的剧本是否需要实景支持</p>
              </div> 
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="剧本形式" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-multi-select-tag type="checkbox" v-decorator="['playbillForm', validatorRules.playbillForm]" :trigger-change="true" dictCode="playbiil_form"/> 
              <div class="help-tip">
                <p>请选择您的剧本形式，若不清楚自己的剧本形式，请在Q&A中寻找对应解答。</p>
              </div> 
            </a-form-item>
          </a-row>
          <!-- <a-row style="padding-left:150px;margin-top: -24px;margin-bottom: 25px;">
            <div style="padding:8px 20px;border:1px solid #FFA39E;background-color: #FFF1F0;color:#666;width:70%;">封闭/半封闭/开放三选一，本格/变格/还原三选一</div>
          </a-row> -->
          <a-row>
            <a-form-item label="剧本类型" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-multi-select-tag type="checkbox" v-decorator="['playbillType', validatorRules.playbillType]" :trigger-change="true" dictCode="playbill_type"/>
              <div class="help-tip">
                <p>请选择您的剧本类型，若不清楚自己的剧本形式，请在Q&A中寻找对应解答。</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="剧本难度" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-multi-select-tag type="checkbox" v-decorator="['belongtoCrowd', validatorRules.belongtoCrowd]" :trigger-change="true" dictCode="belongto_crowd"/>
              <div class="help-tip">
                <p>为您的剧本选择适合的难度，方便适合的人群筛选。</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="游戏时间" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <a-input-number :min="1" :precision="0" :max="24" v-decorator="[ 'playTime', validatorRules.playTime]" placeholder="最大24小时" style="width: 189px;"/> 小时
              <div class="help-tip">
                <p>预计您的剧本全流程时间。</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="道具支持" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-dict-select-tag type="radio" v-decorator="['propStatus', validatorRules.propStatus]" :trigger-change="true" dictCode="prop_status"/>
              <div class="help-tip">
                <p>您的剧本是否有额外的服装或者道具。</p>
              </div>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="剧本供应买断状态" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <j-dict-select-tag type="radio" v-decorator="['buyoutStatus', validatorRules.buyoutStatus]" :trigger-change="true" dictCode="buyout_status"/>
              <div class="help-tip">
                <p>请选择您的剧本供应买断状态，若不清楚自己的剧本供应买断状态，请在Q&A中寻找对应解答。</p>
              </div>
            </a-form-item>
          </a-row>          
          <a-row>
            <a-form-item label="设置标签" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <template v-for="(tag, index) in tags">
                <a-tooltip v-if="tag.length > 20" :key="tag" :title="tag">
                  <a-tag :key="tag" :closable="index !== 0" :afterClose="() => handleClose(tag)">
                    {{`${tag.slice(0, 20)}...`}}
                  </a-tag>
                </a-tooltip>
                <a-tag v-else :key="tag" closable :afterClose="() => handleClose(tag)">
                  {{tag}}
                </a-tag>
              </template>
              <a-input
                v-if="inputVisible && showTagLen"
                ref="input"
                type="text"
                size="small"
                :style="{ width: '78px' }"
                :value="inputValue"
                @change="handleInputChange"
                @blur="handleInputConfirm"
                @keyup.enter="handleInputConfirm"
              />
              <a-tag v-if="!inputVisible && showTagLen" @click="showInput" style="background: #fff; borderStyle: dashed;">
                <a-icon type="plus" /> New Tag
              </a-tag>
              <div class="help-tip">
                <p>请为您的剧本添加您需要展示的tag，最多为4个，每个tag最多4个汉字。</p>
              </div>
            </a-form-item>
          </a-row>
          <div style="width:100%;">
            <Button type="primary" style='margin-left: 10%;width: 12%;display: inline-block;' @click="nextStep(3)">上一步</Button>
            <Button type="primary" style='margin-left: 10%;width: 12%;display: inline-block;' @click="nextStep(1)">下一步</Button>
          </div>
        </div>
        <div v-show="tab3Show">
          <a-row style="margin-top:50px;">
            <a-form-item label="剧本实拍图" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <div class="help-tip" style="right: -40px;top: 0px;">
                <p>请上传剧本实拍图，最多5张，小程序端将显示第一张。</p>
              </div>
              <j-upload v-decorator="['personPoster', validatorRules.personPoster]" :trigger-change="true"></j-upload>
              <!-- <span style="color:red;">建议图片比例为1:1</span> -->
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="剧本海报" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <div class="help-tip" style="right: -40px;top: 0px;">
                <p>请上传剧本实拍图，最多5张，小程序端将显示全部。</p>
              </div>
              <j-upload v-decorator="['playbillPoster', validatorRules.playbillPoster]" :trigger-change="true"></j-upload>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="人物海报" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <div class="help-tip" style="right: -40px;top: 0px;">
                <p>请上传剧本实拍图，最多5张。</p>
              </div>
              <j-upload v-decorator="['productImages', validatorRules.productImages]" :trigger-change="true"></j-upload>
            </a-form-item>
          </a-row>
          <a-row>
            <a-form-item label="道具资料" :labelCol="labelCol" :wrapperCol="wrapperCol" class="textLeft">
              <div class="help-tip" style="right: -40px;top: 0px;">
                <p>请上传剧本实拍图，最多5张。</p>
              </div>
              <j-upload v-decorator="['propData', validatorRules.propData]" :trigger-change="true"></j-upload>
            </a-form-item>
          </a-row>
          <div style="width:100%;">
            <Button type="primary" style='margin-left: 2%;width: 12%;display: inline-block;' @click="nextStep(4)">上一步</Button>
            <Button type="primary" :disabled="showSub" style='margin-left: 7%;display: inline-block;width: 13%;' @click="handleOk">提交</Button>
          </div>
        </div>
      </a-form>
    </a-card>
  </div>
</template>

<script>
  import { httpAction,getAction,postAction,deleteAction } from '@/api/manage'
  import { Button,Modal } from 'ant-design-vue';
  import { browserRedirect } from '@/utils/util'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'  
  import JUpload from '@/components/jeecg/JUpload'
  import JDictSelectTag from "@/components/dict/JDictSelectTag"
  import JMultiSelectTag from "@/components/dict/JMultiSelectTag"
  import BlockProductStandardsAll from './modules/BlockProductStandardsAll'
  import BlockProductApplyCopyModal from './modules/BlockProductApplyCopyModal'
  import BlockProductStandardsModal from './modules/BlockProductStandardsModal'

  export default {
    name: "BlockProductInfoList",
    components: {
      JDate,
      Modal,
      JUpload,
      JDictSelectTag,
      JMultiSelectTag,
      Button,
      BlockProductStandardsAll,
      BlockProductStandardsModal,
      BlockProductApplyCopyModal
    },
    data () {
      return {
        browserRedirect:false,
        showTrue:false,
        showExImg:false,
        itemPatchList:"",
        visibleAgean:false,
        itemPathVal:"",
        totalVal:"",
        visible: false,
        imageurl:"",
        showAll:false,
        showCode:false,
        urlImg:"",
        listData:{},
        dataSource1:[],
        dataSource1List:[],
        ipagination1:{
          current: 1,
          pageSize: 10,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          total: 0
        },
        ipagination:{
          current: 1,
          pageSize: 10,
          showSizeChanger:false,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          total: 0
        },
        products_total:"0",
        shopkeeper_total:"0",
        yesterday_scan_total:"0",
        user_avatar:"",
        factory_name:"",
        loading: true,
        center: null,
        dataSource:[],
        loginfo:{},
        colList:[],
        listCodeData:{},
        initData:{
          createBy: "",
          createTime: "",
          flag: "",
          id: "",
          loginTime: "",
          manufacturerId: "",
          phone: "",
          updateBy: "",
          updateTime: "",
          userName: ""
        },
        issuerId:"",
        futerId:"",
        // url: {
        //   list: "/block/blockProductStandards/list"
        // },
        columns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'剧本名称',
            align:"left",
            width:"25%",
            dataIndex: 'productName',
            scopedSlots: { customRender: 'htmlSlot' }
          },
          {
            title:'作者',
            align:"center",
            dataIndex: 'author'
          },
          {
            title:'总量/剩余',
            align:"center",
            dataIndex: 'total',
            scopedSlots: { customRender: 'total' }
          },
          {
            title:'零售价格',
            align:"center",
            dataIndex: 'wholesalePrice'
          },
          {
            title:'标签',
            align:"center",
            dataIndex: 'labelTags'
          },
          {
            title:'正式发行时间',
            align:"center",
            dataIndex: 'publicTime'
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            scopedSlots: { customRender: 'action' }
          }
        ],


        statusValue:1,
        current: 0,
        showOneTep:true,
        showNext:false,
        statusPass:"",
        userAuth2btn:"",
        tags: [],
        inputVisible: false,
        showTagLen:true,
        inputValue: '',
        showSub:false,
        tab1Show:true,
        tab2Show:false,
        tab3Show:false,
        form: this.$form.createForm(this),
        title:"操作",
        width:"100%",
        visible: false,
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        manSel:0,
        detailNum1:"",
        detailNum2:"",
        detailNum3:"",
        listPerson:[{
          name:"男女不限",
          val:"1"
        },{
          name:"男女有限制",
          val:"2"
        }],
        validatorRules: {          
          // productStatus: {rules: [
          //   {required: true, message: '请选择剧本类型!'},
          //   {max:15, message: '最多15个汉字!'}
          // ]},
          productName: {rules: [
            {required: true, message: '请输入剧本名称!'},
            {max:15, message: '最多15个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          itemPatch: {rules: [
            {required: true, message: '请输入批次!'},
            {max:10, message: '最多10个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          itemType: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          total: {rules: [
            {required: true, message: '请输入总量!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          saleTotal: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          catalogId: {rules: [
            // {required: true, message: '请选择剧本大类'},
          ]},
          labelTags: {rules: [
          ]},
          author: {rules: [
            {required: true, message: '请输入作者!'},
            {max:15, message: '最多15个字符!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          productInfo: {rules: [
            {required: true, message: '请输入一句话简介!'},
            {max:15, message: '最多15个字符!'},
          ]},          
          playReality: {rules: [
            {required: true, message: '请选择剧本实景!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          wholesalePrice: {rules: [
            {required: true, message: '请输入零售价格!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          itemCode: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          detailInfo: {rules: [
            {required: true, message: '请输入剧本简介!'},
            {max:300, message: '最多300个字符!'},
          ]},
          personPoster: {rules: [
            {required: true, message: '请上传剧本实拍图!'},
          ]},
          playbillPoster: {rules: [
            {required: true, message: '请上传剧本海报!'},
          ]},
          productImages: {rules: [
            // {required: true, message: '请上传人物海报!'},
          ]},
          publicTime: {rules: [
            {required: true, message: '请选择正式发行时间!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          proPublicTime: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          preSaleTotal: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          preWholesalePrice: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          playbillForm: {rules: [
            {required: true, message: '请选择剧本形式!'},
          ]},
          playbillType: {rules: [
            {required: true, message: '请输入剧本类型!'},
          ]},
          playbillBackground: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          belongtoCrowd: {rules: [
            {required: true, message: '请选择剧本难度!'},
          ]},
          playTime: {rules: [
            {required: true, message: '请输入游戏时间!'},
            { 
              pattern: /^[^\s]*$/,
              message: '禁止输入空格',
            },
          ]},
          sendgoodTime: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          supportLogistics: {rules: [
            // {required: true, message: '请选择剧本小类!'},
          ]},
          propStatus: {rules: [
            {required: true, message: '请选择道具支持!'},
          ]},
          propData: {rules: [
            // {required: true, message: '请上传道具资料!'},
          ]},
          buyoutStatus: {rules: [
            {required: true, message: '请选择买断状态!'},
          ]},
        },
        url: {
          add: "/block/blockProductStandards/add",
          edit: "/block/blockProductStandards/edit",
        }
        
      }
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      }
    },
    mounted() {
      this.browserRedirect = browserRedirect();
      // this.urlImg = window._CONFIG['imgDomainURL']+'/';
      this.urlImg = "";
      this.indataList();
      let list={
        column: "createTime",
        order: "desc",
        field: "id,,factoryName,companyProfile,createTime,type,name,status,address,phone,imageurl,action",
        pageNo: 1,
        pageSize: 5
      };
      getAction("/block/blockManufacturerInfo/list",list).then((res)=>{
        if (res.success) {
          this.statusPass = res.result.records[0].status;
        } else {
          this.$message.warning(res.message)
        }
      })
      getAction("/block/blockManufacturerInfo/userAuth2btn")
        .then(res => {
          if (res.success) {
            this.userAuth2btn = res.result.status;
          } else {
            this.$message.warning(res.message)
          }
        })     
    },
    watch:{
      tags(val){
        if(val.length>5){
          this.showTagLen = false;
        }else{
          this.showTagLen = true;
        }
      }
    },
    methods: {
      onChange(pageNumber) {
        this.ipagination.current = pageNumber;
        this.indataList();
      },
      //列表
      deleteCli(record){
        var param={
            id:record.id
          };
        deleteAction("/block/blockProductStandards/delete",param).then((res) => {
            if (res.success) {
              this.$message.success(res.message);
              this.indataList();
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
          })
      },
      codeQrCli(record){
        var that=this;
        postAction("/block/blockProductStandards/judgeDataIntergrity?id="+record.id,{'id':record.id}).then((res) => {
            if (!res.success) {
              that.$message.warning("剧本信息不完整,请先补充完整剧本信息！")
              that.detailsCli(record,1);
            }else{
              if(record.applyStatus == 2 || record.applyStatus == null){
                that.showCode = true;
                that.listCodeData = record;
              }else if(record.applyStatus == 0){
                that.$message.success("您的二维码正在等待审核，请耐心等待！")
              }else if(status == 1){
                that.$message.success("您的二维码审批已通过！")
              }else{
                that.$message.success("您的二维码正在审核中，请耐心等待！")
              }
            }
          })
      },
      addItemPath(record){
        this.itemPatchList = record;
        this.itemPathVal="";
        this.totalVal="";
        this.visibleAgean=true;
      },
      handleAgainOk(){
        if(!this.itemPathVal){
          this.$message.warning("请输入批次！");
          return
        }
        if(!this.totalVal){
          this.$message.warning("请输入总量！");
          return
        }
        this.itemPatchList.applyStatus=0;
        this.itemPatchList.id="";
        this.itemPatchList.itemPatch = this.itemPathVal;
        this.itemPatchList.total = this.totalVal;
        this.showTrue=true;
        postAction("/block/blockProductStandards/add",this.itemPatchList).then((res) => {
          this.showTrue=false;
          if(res.success){
            this.visibleAgean=false;
            this.indataList();
            this.$message.success(res.message);
          }else{
            this.$message.warning(res.message);
          }
        })
      },
      returnListCli(){
        this.showOneTep = true;
        this.showNext = false;
      },
      jumpShow(){
        this.showOneTep = false;
        this.showNext = true;
      },
      futerList(){
        var param={
            order: "asc",
            field: "",
            pageNo: this.ipagination1.current,
            pageSize: 10
          };
        getAction("exhibition/exhibition_product_standards_new/getShowData").then((res) => {
            if (res.success) {
              this.ipagination1.total = res.result.total;
              this.dataSource1 = res.result;
              this.dataSource1List = res.result;
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
          })
      },
      indataList(){
        var params={
          order: "asc",
          pageNo: this.ipagination.current,
          pageSize: 10
        };
        getAction("/block/blockProductStandards/listToHome",params).then((res) => {
          if (res.success) {
            this.dataSource = res.result.records;
            this.colList = res.result.records;
            this.ipagination.total = res.result.total;
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
        })
      },
      handleTableChange(pagination, filters, sorter) {
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
        }
        this.ipagination = pagination;
        this.indataList();
      },
      handleTableChange1(pagination, filters, sorter) {
        //TODO 筛选
        if (Object.keys(sorter).length > 0) {
          this.isorter.column = sorter.field;
          this.isorter.order = 'ascend' === sorter.order ? 'asc' : 'desc';
        }
        this.ipagination1 = pagination;
        this.futerList();
      },
      detailsCli(record,num){
        if(num == 1){
          this.$forceUpdate();
          // this.handleEdit(record);
          this.$refs.modalForm.edit(record);
          this.$refs.modalForm.title = "编辑";
          this.$refs.modalForm.disableSubmit = false;
        }else{
          this.showAll=true;
          this.listData = record;
        }
      },
      changeSpecification1(value,option){
        if(value==""){
          this.futerList();
        }else{
          var params={
            productName: value,
            itemPatch:option.key,
            column:"createTime",
            order: "asc",
            field: "",
            pageNo: 1,
            pageSize: 10
          };
          getAction("exhibition/exhibition_product_standards_new/getShowData",params).then((res) => {
            if (res.success) {
              this.dataSource1 = res.result;
              this.ipagination1.total = res.result.total;
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
          })
        }
      },
      returnUp(data){
        this.showAll = data;
        this.showCode = data;
        this.indataList();
      },
      changeSpecification(value,option){
        if(value==""){
          this.indataList();
        }else{
          var params={
            id:value,
            productStandardsId: value,
            itemPatch:option.key,
            order: "asc",
            pageNo: this.ipagination.current,
            pageSize: 10
          };
          getAction("/block/blockProductStandards/listToHome",params).then((res) => {
            if (res.success) {
              this.dataSource = res.result.records;
              this.ipagination.total = res.result.total;
            }
            if(res.code===510){
              this.$message.warning(res.message)
            }
          })
        }
      },
      modalFormOk() {
        this.indataList();
      },
      callback(key){
        if(key == 1){
          this.indataList();
        }
        if(key == 2){
          this.futerList();
        }
      },
      //添加剧本
      checkCli(){
        getAction("/block/blockManufacturerInfo/userAuth2btn")
        .then(res => {
          if (res.success) {
            this.userAuth2btn = res.result.status;
            if(this.userAuth2btn != "1"){
              this.$message.warning("您不是发行方，无法登记剧本！")
              return
            }else{
              let list={
                column: "createTime",
                order: "desc",
                field: "id,,factoryName,companyProfile,createTime,type,name,status,address,phone,imageurl,action",
                pageNo: 1,
                pageSize: 5
              };
              getAction("/block/blockManufacturerInfo/list",list).then((res)=>{
                if (res.success) {
                  this.statusPass = res.result.records[0].status;
                  if(this.statusPass != "1"){
                    this.$message.warning("您的资料审核未通过，请耐心等候！")
                  }else{
                    this.showOneTep = false;
                    this.showNext = true;
                  }
                } else {
                  this.$message.warning(res.message)
                }
              })
            }
          } else {
            this.$message.warning(res.message)
          }
        })
        // if(this.userAuth2btn == "1" && this.statusPass == "1"){
        //   this.showOneTep = false;
        //   this.showNext = true;
        // }else{
        //   if(this.userAuth2btn != "1"){
        //     this.$message.warning("您不是发行方，无法登记剧本！")
        //   }
        //   if(this.statusPass != "1"){
        //     this.$message.warning("您的资料审核未通过，请耐心等候！")
        //   }
        // }
      },
      handleClose(removedTag) {
        const tags = this.tags.filter(tag => tag !== removedTag);
        this.tags = tags;
      },

      showInput() {
        this.inputVisible = true;
        this.$nextTick(function() {
          this.$refs.input.focus();
        });
      },

      handleInputChange(e) {
        var that = this;
        if(!testRule(e.target.value)){
          that.$message.warning("不能包含空格！");
          return
        }
        this.inputValue = e.target.value;
      },

      handleInputConfirm() {
        const inputValue = this.inputValue;
        let tags = this.tags;
        if (inputValue && tags.indexOf(inputValue) === -1) {
          tags = [...tags, inputValue];
        }
        Object.assign(this, {
          tags,
          inputVisible: false,
          inputValue: '',
        });
      },
      nextStep(num){
        const that = this;
        // 触发表单验证
        if(num == 3){
          this.tab1Show = true;
          this.tab2Show = false;
          this.current = 0;
        }
        if(num == 4){
          this.tab2Show = true;
          this.tab3Show = false;
          this.current = 1;
        }
        if(num == 0){
          if (this.form.getFieldValue('productName') && this.form.getFieldValue('productName').indexOf(" ") == -1 && this.form.getFieldValue('author') && this.form.getFieldValue('author').indexOf(" ") == -1 && this.form.getFieldValue('itemPatch') && this.form.getFieldValue('itemPatch').indexOf(" ") == -1 && this.form.getFieldValue('total') && this.form.getFieldValue('wholesalePrice') && this.form.getFieldValue('publicTime')) {            
            this.tab1Show = false;
            this.tab2Show = true;
            this.current = 1;
          }else{
            this.form.validateFields((err, values) => {
            })
          }
        }    
        if(num == 1){
          if(this.tags.length<1){
            this.$message.warning("请设置标签！");
            return
          }
          if(this.manSel == 0 && !this.detailNum1){
            this.$message.warning("请输入剧本人数！");
            return
          }
          if(this.manSel == 1 && !this.detailNum2 && !this.detailNum3){
            this.$message.warning("请输入剧本人数！");
            return
          }
          if (this.form.getFieldValue('playReality') && this.form.getFieldValue('detailInfo') && this.form.getFieldValue('playbillForm') && this.form.getFieldValue('playbillType') && this.form.getFieldValue('belongtoCrowd') && this.form.getFieldValue('playTime') && this.form.getFieldValue('propStatus') && this.form.getFieldValue('buyoutStatus')) {            
            this.tab2Show = false;
            this.tab3Show = true;
            this.current = 2;
          }else{
            this.form.validateFields((err, values) => {
            })
          }
        }
      },
      handleOk () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            this.showSub = true;
            values.catalogId = "1216548439660412929";
            values.itemType = "1216548480059949057";
            var arrList="";
            for(let i=0,len=this.tags.length;i<len;i++){
              if(i == 0){
                arrList = this.tags[0];
              }else{
                arrList+=","+this.tags[i];
              }
            }
            values.labelTags = arrList;
            if(this.manSel == 0){
              values.playbillNumber = this.detailNum1;
            }
            if(this.manSel == 1){
              values.playbillNumber =this.detailNum2+","+this.detailNum3;
            }
            let httpurl = '';
            let method = '';
            httpurl+=this.url.add;
            method = 'post';
            values.biz_status = 0;
            that.$message.success("剧本信息登记成功！");
            this.current = 0;
            this.tab1Show = true;
            this.tab2Show = false;
            this.tab3Show = false;
            this.showOneTep = true;
            this.showNext = false;
            // let formData = Object.assign(this.model, values);
            httpAction(httpurl,values,method).then((res)=>{
              this.indataList();
              // if(res.success){
              //   that.$message.success(res.message);
              // }else{
              //   that.$message.warning(res.message);
              // }
            })
          }         
        })
      }
    }
  }
</script>
<style lang="less" scoped>
  .liCommSty{
    background-color: #fff;
    padding:15px;
    margin-bottom: 10px;
    border-radius: 6px;
  }
  .divTopSty{
    background-color: #404B70;
    height:225px;
    padding:20px 10px;
  }
  /* @import '~@assets/less/common.less' */
  #components-form /deep/ .ant-form-item-label{
    width:150px;
  }
  #components-form /deep/ .ant-form-item-control-wrapper{
    width:60%;
  }
  .tablePlaceholder /deep/ .ant-spin-nested-loading{
    height:333px;
  }
  .tablePlaceholder /deep/ .ant-table-placeholder{
    height:277px;
  }
  .textLeft /deep/ .ant-form-item-label{
    text-align: left;
  }
  .selSty{
    width: 12%;
    position: absolute;
    left: 140px;
    top: 16px;
    z-index: 10;
  }
  /* #content{
    position: absolute;
    top: -9px;
    right: -56px;  
  } */
/* help-tip */
.help-tip{
  position: absolute;
  top: 0px;
  right: -36px;
  text-align: center;
  background-color: #BCDBEA;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 14px;
  line-height: 20px;
  cursor: default;
}
.help-tip:before{content:'?';font-weight:bold;color:#fff;}
.help-tip:hover p{display:block;transform-origin:100% 0%;-webkit-animation:fadeIn 0.3s ease-in-out;animation:fadeIn 0.3s ease-in-out;}
.help-tip p{z-index:999;display:none;text-align:left;background-color:rgba(0, 0, 0, 0.75);padding:10px;width:180px;position:absolute;border-radius:3px;box-shadow:1px 1px 1px rgba(0, 0, 0, 0.2);right:-4px;color:#FFF;font-size:13px;line-height:1.4;}
.help-tip p:before{position:absolute;content:'';width:0;height:0;border:6px solid transparent;border-bottom-color:#1E2021;right:10px;top:-12px;}
.help-tip p:after{width:100%;height:40px;content:'';position:absolute;top:-40px;left:0;}
</stylelang="scss">